<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="账单名称"
          hasFeedback required>
          <a-input placeholder="请输入账单名称" v-model="billName" />
        </a-form-item>
		<a-form-item
		  :labelCol="labelCol"
		  :wrapperCol="wrapperCol"
		  label="金额"
		  hasFeedback required>
		  <a-input type="number" placeholder="请输入账单金额" v-model="billMoney" />
		</a-form-item>

		<a-form-item
		  :labelCol="labelCol"
		  :wrapperCol="wrapperCol"
		  label="类型"
		  hasFeedback required>

		<a-select  v-model="billType" placeholder="请选择类型">
		  <a-select-option :value="1">物流费用账单</a-select-option>
		  <a-select-option :value="2">充值撤回账单</a-select-option>
		</a-select>

			</a-form-item>

	<a-form-item
		  :labelCol="labelCol"
		  :wrapperCol="wrapperCol"
		  label="客户"
		  hasFeedback required>

		<a-select v-model="userId" placeholder="请选择客户">
		<a-select-option v-for="item in userList"  :key="item.id" :value="item.id.toString()">
		     {{item.realname}}
		     </a-select-option>
		 </a-select>
		</a-form-item>

<!--	<a-form-item-->
<!--	  :labelCol="labelCol"-->
<!--	  :wrapperCol="wrapperCol"-->
<!--	  label="客户编号"-->
<!--	  hasFeedback >-->
<!--	  <a-input  placeholder="请输入客户编号" v-model="companyCode" />-->
<!--	</a-form-item>-->

     <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
          hasFeedback >

		  <a-textarea placeholder="请填写你的备注" :rows="4"  v-model="remark"/>
        </a-form-item>
     <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="附件"
          hasFeedback >
                <el-upload
				disabled="true"
  style="margin-top: 0px;"
  action="https://api.nbyid.cn/mlcc/user/interface/uploadImage"

  list-type="text"
  :limit="3"
  :on-exceed="handleExceed"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
   :on-change="handleChangePic"
  ref="upload">
</el-upload>
 </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
import { deleteAction, getAction, putAction, postAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
  export default {
    name: "addMonthStatement",
    data () {
      return {
		  companyCode:'',
		  caozuotype:'',
		  businessLicense:'',
		  userId:'',
		  userList:[],
		  billType:'',
		  billName:'',
		  billMoney:'',
		  remark:'',
		  discountSystemName:'',
		  RangeStart:'',
		  RangeEnd:'',
		  id:'',
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        },
        url: {
          add: "/MonthStatement/addMonthStatement",
          edit: "/MonthStatement/addMonthStatement",
		  detail:"/Discount/getdiscountSystemdetail",
		  update:"/MonthStatement/updateMonthStatement",
		  userList:"/MonthStatement/getAlluser"
        },
      }
    },
    created () {


		this.getdetail();

    },
    methods: {
		 handleChangePic(file,fileList){
		     if (fileList.length > 1) {
		         fileList.splice(0, 1);
		     }
		 },
		//上传图片成功函数
		handleSuccess(response, file, fileList) {
		  var result = response;
		  this.businessLicense = result.data;
		},
		getdetail(){
			getAction(this.url.userList).then((res)=>{
			  if(res.success){
			 this.userList=res.result;
			  }else{
			    that.$message.warning(res.message);
			  }
			})
		},

      add () {
        this.edit({});
      },
      edit (record,caozuotype) {
		  this.caozuotype=caozuotype;
		  if(caozuotype==0){
        this.companyCode='';
        this.billName='';
        this.remark='';
        this.billType='请选择类型';
        this.billMoney='';
		    this.userId='请选择客户';
		  	this.businessLicense='';
		  	this.title='新增账单'
				}else{
					  this.billId=record.billId;
					  this.billName=record.billName;
					  this.remark=record.remark;
					  this.billType=record.billType;
					  this.billMoney=record.billMoney;
					  this.userId=record.userId;
						this.businessLicense=record.fujian;
        this.title='编辑账单'
				}
		 this.id=record;
		 if(this.id!=0){
			 this.getdetail(this.id);
       this.title='编辑账单'
		 }else{
			 this.discountSystemName='';
			  this.remark='';
		 }
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'name','keyWord','sex','age','email','content'))
		      //时间格式化
          this.form.setFieldsValue({punchTime:this.model.punchTime?moment(this.model.punchTime,'YYYY-MM-DD HH:mm:ss'):null})
          this.form.setFieldsValue({birthday:this.model.birthday?moment(this.model.birthday):null})
        });
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
             if(this.billName==null || this.billName==''){
               this.$message.warning("账单名称不能为空")
               return
             }
            if(this.billMoney==null || this.billMoney==''){
              this.$message.warning("账单金额不能为空")
              return
            }
            if(!reg.test(this.billMoney)){
              this.$message.warning("请输入正确格式的金额");
              return;
            }
            if(this.billType==null || this.billType=='' || this.billType=='请选择类型'){
              this.$message.warning("请选择账单类型")
              return
            }
            if(this.userId==null || this.userId=='' || this.userId=='请选择客户'){
              this.$message.warning("请选择客户")
              return
            }
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
			      let formData = {};
            if(this.caozuotype==0){
              httpurl+=this.url.add;
              method = 'post';
			        formData['billName']=this.billName;
			        formData['remark']=this.remark;
			  			formData['billType']=this.billType;
			        formData['billMoney']=this.billMoney;
			        formData['userId']=this.userId;
			  			 formData['fujian']=this.businessLicense;
						  formData['companyCode']=this.companyCode;
            }else{
               httpurl+=this.url.update;
               method = 'post';
              formData['billId']=this.billId;
              formData['billName']=this.billName;
              formData['remark']=this.remark;
              formData['billType']=this.billType;
              formData['billMoney']=this.billMoney;
              formData['userId']=this.userId;
              formData['fujian']=this.businessLicense;
              formData['companyCode']=this.companyCode;
            }
            postAction(httpurl,formData,method).then((res)=>{
              that.confirmLoading = false;
              if(res.success){
                that.$message.success(res.message);
                // that.$emit('aaa');
                that.close();
                that.loadData();
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              // that.close();
            })
          }
        })
      },
      close () {
        this.$emit('aaa');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>

</style>